<template>
  <el-table :data="myData" style="width: 100%">
    <el-table-column prop="floor" label="floor" width="140"></el-table-column>
    <el-table-column prop="face" label="face" width="140"></el-table-column>
    <el-table-column prop="row0" label="row" width="140"></el-table-column>
    <el-table-column prop="col" label="col" width="140"></el-table-column>
    <el-table-column label="modify">
      <template v-slot="scope">
        <el-button type="primary" value="return" @click="openDialog(1, scope.row)"
          >modify</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <location-dialog
    v-model:visible="dialogFormVisible"
    :mode="mode"
    :dialogData="dialogData"
    @upload="onUploaded"
  ></location-dialog>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import * as bookApi from "@/api/books";
import { ElMessage } from "element-plus";
import LocationDialog from "./ChangeBookLocationDialog.vue";


const dialogFormVisible = ref(false);
const mode = ref<0 | 1>(0);
const dialogData = ref();
const openDialog = (targetMode: 0 | 1, location?: any) => {
  mode.value = targetMode;
  dialogFormVisible.value = true;
  dialogData.value = location;
};
const onUploaded = () => {
  getData();
};

const myData = ref([]);
const getData = () => {
  bookApi.getBookLocation().then((data) => {
    myData.value = data;
    console.log('data', data);
  });
};

onMounted(() => {
  getData();
});
</script>

<style scoped>
.upload-btn {
  float: left;
}
</style>
